<script setup>
import { ref } from 'vue';
import categoryCascader from '@/views/common/categoryCascader'
import { getCategorysByAttrIdApi, saveAttrCategoryApi, deleteAttrCategoryApi } from '@/apis/pms/attrRelate.js'

// 表格数据
const gridData = ref([])
const getAttrCategory = async (attributeId) => {
  const res = await getCategorysByAttrIdApi(attributeId)
  gridData.value = res.data;
}

// 初始化
const formData = ref({});
const dialogTableVisible = ref(false)
const init = async (attributeId) => {
  formData.value.attributeId = attributeId;
  await getAttrCategory(attributeId)
  dialogTableVisible.value = true;
}

defineExpose({
  init,
})

// 显示属性
const visible = ref(false);
const handleGetCategorys = async () => {
  visible.value = true;
}

// 点击确定
const categoryPath = ref([])
const handleConfirm = () => {
  if(categoryPath.value.length === 0){
    ElMessage({
      message: '未选择分类数据',
      type: 'warning',
    })
    return;
  }
  formData.value.categoryId = categoryPath.value[categoryPath.value.length -1];
  saveAttrCategoryApi(formData.value)
    .then(res => {
      if (res.code === 0) {
        ElMessage({
          message: '添加成功',
          type: 'success',
        })
        getAttrCategory(formData.value.attributeId)
        visible.value = false;
      }
    })
}

// 删除关联信息
const handleRemove = (id) => {
  console.log(id)
  deleteAttrCategoryApi(id)
    .then(res => {
      if (res.code === 0) {
        ElMessage({
          message: '删除成功',
          type: 'success',
        })
        getAttrCategory(formData.value.attributeId)
      }
    })
}

// 关闭的回调
const handleClose = () => {
  visible.value = false;
}

</script>

<template>
  <div>
    <el-dialog v-model="dialogTableVisible" :close-on-click-modal="false" @close="handleClose" title="关联分类"
      style="width: 35%;">
      <el-popover :visible="visible" placement="right" :width="300" trigger="click">
        <div class="cascader">
          <categoryCascader v-model:categoryPath="categoryPath" />
        </div>
        <div class="button">
          <el-button size="small" text @click="visible = false">取消</el-button>
          <el-button style="margin-left: 50px;" size="small" type="primary" @click="handleConfirm">确定</el-button>
        </div>
        <template #reference>
          <el-button color="#626aef" @click="handleGetCategorys">选择关联</el-button>
        </template>
      </el-popover>

      <el-table :data="gridData" class="table" height="200">
        <el-table-column property="categoryName" label="分类名" align="center" />
        <el-table-column label="操作" align="center">
          <template v-slot="scope">
            <el-button type="danger" link @click="handleRemove(scope.row.id)">
              删除
            </el-button>
          </template>
        </el-table-column>
      </el-table>
    </el-dialog>
  </div>
</template>

<style scoped lang='scss'>
.cascader {
  display: flex;
  width: 100%;
  justify-content: center;
}

.button {
  display: flex;
  width: 100%;
  justify-content: center;
  text-align: right;
  margin-top: 20px;
}

.table {
  margin-top: 20px;
}
</style>